Overview

1. Modifying the initial values ​​of the buildContext example document

In the example, null is passed as the second argument, but since the signature of buildContext is as follows, null cannot be passed.

function buildContext<ContextValuesType extends object>(
  contextName: string,
  defaultContextValues?: ContextValuesType, // null cannot be inserted
)

Also, since we used the <{ title: string }> generic type, we cannot initialize it with null.

2. Absence of displayName from Provider

Currently, it is difficult to debug because there is no displayName for Provider, so the displayName is specified using the contextName prop.

Before	After

3. Fix branching of the useInnerContext function

Since the type declaration of Context is as follows, when reading the Context with useContext, it is inferred as ContextValuesType | undefined.

const Context = createContext<ContextValuesType | undefined>(
  defaultContextValues,
);

However, if there are no values ​​received as props within the Provider, null is returned. If props exist, the received props are returned.

const value = useMemo(
  () => (Object.keys(contextValues).length > 0 ? contextValues : null),
  // eslint-disable-next-line react-hooks/exhaustive-deps
  [...Object.values(contextValues)]
) as ContextValuesType;

Therefore, when reading useContext, ContextValuesType | null is actually returned, but the type system infers ContextValuesType | undefined.

To solve this complex and tangled type problem, the type of context was unified to ContextValuesType | null so that only null can be handled.

// as-is
const Context = createContext<ContextValuesType | undefined>(
  defaultContextValues,
);

const context = useContext(Context);
if (context != null) {
  return context;
}

// to-be
const Context = createContext<ContextValuesType | null>(defaultContextValues ?? null);

const context = useContext(Context);
if (context !== null) {
  return context;
}

Since the type of defaultContextValues ​​is <ContextValuesType extends object> | undefined , null cannot be provided, so there is no need to handle the case of null.

// as-is
if (defaultContextValues != null) {
  return defaultContextValues;
}

// to-be
if (defaultContextValues !== undefined) {
  return defaultContextValues;
}

Checklist

• Did you write the test code?
• Have you run yarn run fix to format and lint the code and docs?
• Have you run yarn run test:coverage to make sure there is no uncovered line?
• Did you write the JSDoc?